import React from 'react';
import Header from"./include/header";
import  Bottom from"./include/bottom";
import {Swiper} from "antd-mobile";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            goodses:[
                {
                    image: "/static/media/image/1.jpg",
                    title: "某某某商品1",
                    price: 15,
                    sellNum:50
                },
                {
                    image: "/static/media/image/2.jpg",
                    title: "某某某商品2",
                    price: 13.5,
                    sellNum:90
                },
                {
                    image: "/static/media/image/3.jpg",
                    title: "某某某商品3",
                    price: 20,
                    sellNum:10
                },
                {
                    image: "/static/media/image/4.jpg",
                    title: "某某某商品4",
                    price: 35,
                    sellNum:30
                }
            ]
        }

    }
    colors = ['#ace0ff', '#bcffbd', '#e4fabd']
    items = this.colors.map((color, index) => (
        <Swiper.Item key={index}>
            <div
            >
                <img className={"photo"} src={require("../asset/img/banner/"+(index+1)+".jpg").default} alt={""}/>
            </div>
            <div className={"goodsDiv"}>

            </div>

        </Swiper.Item>
    ))

        render()
        {
            return (
                <div className="mainApp">
                    <Header />
                <div className="middleApp">
                    <Swiper autoplay className={"banner"}>{this.items}</Swiper>
                    <div className="goodsDiv">
                        {this.state.goodses.map((goods,index)=>
                        <div className={"goodsItem"}>
                            <img className="goods" src={goods.image} alt=""/>
                            <span>
                                <span className={"title"}>{goods.title}</span><br/><br/>
                                <span className={"price"}>${goods.price.toFixed(2)}</span><br/><br/>
                                <span className={"sellNum"}>销量：{goods.sellNum}/每月</span>
                        </span>
                        </div>
                    )}
                </div>
                </div>
                    <Bottom history={this.props.history}/>
                </div>
            )
        }
    }
export default App;